<template>
  <view class="index-container">
    <view class="status_bar"><!-- 这里是状态栏 --></view>
    <u-swiper :list="topSwiper" indicator indicatorMode="dot" circular :radius="0"></u-swiper>
    <view class="content">
      <view class="card-box">
        <view class="item" v-for="item in topList" :key="item.code" @click="handleCommand(item)">
          <view class="icon" :style="{ backgroundColor: item.color }">
            <image :src="item.img" />
          </view>
          <view class="title">{{ item.title }}</view>
        </view>
      </view>

      <view class="card-box">
        <view class="card-header">作业票</view>
        <view class="item" v-for="item in zuoyeList" :key="item.code" @click="handleCommand(item)">
          <view class="icon" :style="{ backgroundColor: item.color }">
            <image :src="item.img" />
          </view>
          <view class="title">{{ item.title }}</view>
        </view>
      </view>

      <view class="card-box">
        <view class="card-header">双重预防</view>
        <view
          class="item"
          v-for="item in shuangchongList"
          :key="item.code"
          @click="handleCommand(item)"
        >
          <view class="icon" :style="{ backgroundColor: item.color }">
            <image :src="item.img" />
          </view>
          <view class="title">{{ item.title }}</view>
        </view>
      </view>
    </view>
  </view>
</template>

<script setup>
import { ref } from '@vue/composition-api'
import { onLoad } from '@dcloudio/uni-app'
// 顶部轮播
const topSwiper = [require('@/static/banner1.png')]

// 顶部导航栏
const topList = [
  {
    code: 'gonggao',
    img: require('@/static/index/gonggao.svg'),
    title: '通知公告',
    color: '#31DEA9',
  },
  {
    code: 'daiban',
    img: require('@/static/index/daiban.svg'),
    title: '待办事项',
    color: '#E5652C',
  },
  {
    code: 'jifen',
    img: require('@/static/index/jifen.svg'),
    title: '积分管理',
    color: '#5DBDF5',
  },
  {
    code: 'jiaoyu',
    img: require('@/static/index/jiaoyu.svg'),
    title: '教育培训',
    color: '#D32829',
  },
]

// 作业票
const zuoyeList = [
  {
    code: 'donghuo',
    img: require('@/static/index/donghuo.svg'),
    title: '动火作业',
    color: '#3388FF',
  },
  {
    code: 'gaochu',
    img: require('@/static/index/gaochu.svg'),
    title: '高处作业',
    color: '#3388FF',
  },
  {
    code: 'diaozhuang',
    img: require('@/static/index/diaozhuang.svg'),
    title: '吊装作业',
    color: '#3388FF',
  },
  {
    code: 'youxian',
    img: require('@/static/index/youxian.svg'),
    title: '有限空间',
    color: '#3388FF',
  },
  {
    code: 'linshi',
    img: require('@/static/index/linshi.svg'),
    title: '临时用电',
    color: '#3388FF',
  },
  {
    code: 'dongtu',
    img: require('@/static/index/dongtu.svg'),
    title: '动土作业',
    color: '#3388FF',
  },
  {
    code: 'duanlu',
    img: require('@/static/index/duanlu.svg'),
    title: '断路作业',
    color: '#3388FF',
  },
  {
    code: 'mangban',
    img: require('@/static/index/duanlu.svg'),
    title: '盲板抽堵',
    color: '#3388FF',
  },
]

// 双重预防
const shuangchongList = [
  {
    code: 'huibao',
    img: require('@/static/index/huibao.svg'),
    title: '隐患汇报',
    color: '#09C15F',
  },
  {
    code: 'paicha',
    img: require('@/static/index/paicha.svg'),
    title: '隐患排查',
    color: '#09C15F',
  },
  {
    code: 'guankong',
    img: require('@/static/index/guankong.svg'),
    title: '风险分级',
    color: '#09C15F',
  },
  {
    code: 'jiancha',
    img: require('@/static/index/jiancha.svg'),
    title: '监督检查',
    color: '#09C15F',
  },
]

function handleCommand(item) {
  uni.$u.toast('点击了：' + item.title)
}

onLoad(() => {
  console.log('-------------index-load-------------')
})
</script>

<style lang="scss">
.status_bar {
  height: var(--status-bar-height);
  width: 100%;
}
.index-container {
  background-color: #f7f7f7;
  min-height: 100vh;
  .content {
    padding: 15px;
    .card-box {
      background-color: #ffffff;
      margin-bottom: 15px;
      .card-header {
        font-size: 16px;
        color: $uni-text-color;
        font-weight: bold;
        padding: 8px 12px;
        border-bottom: 1px solid $uni-border-color;
        margin-bottom: 8px;
      }
      .item {
        display: inline-flex;
        flex-direction: column;
        justify-content: center;
        align-items: center;
        width: 25%;
        padding: 8px 0;
        .title {
          font-size: 14px;
          margin-top: 8px;
          color: $uni-text-color-grey;
        }
        .icon {
          display: inline-flex;
          align-items: center;
          justify-content: center;
          background-color: #f7f7f7;
          width: 48px;
          height: 48px;
          border-radius: 50%;
          image {
            width: 24px;
            height: 24px;
          }
          // > uni-image {
          //   width: 24px;
          //   height: 24px;
          // }
        }
      }
    }
  }
}
</style>
